<script lang="ts" setup>
import { reactive } from 'vue'
import { Form as AForm,Select as ASelect,SelectOption as ASelectOption, Input as AInput} from "ant-design-vue";

// 搜索
const formState = reactive({
      name: ''
    });
</script>

<template>
    <!--  表单 -->
    <a-form :model="formState" class="wsl-form">
        <div class="row-normal">
            <div class="row-normal">
                <span class="font-size-10" style="color: rgb(172,174,183);">区：</span>
                <a-select placeholder="请选择">
                    <a-select-option value="shanghai">Zone one</a-select-option>
                    <a-select-option value="beijing">Zone two</a-select-option>
                </a-select>
            </div>
            <div class="row-normal m-l-10">
                <span class="font-size-10" style="color: rgb(172,174,183);">排：</span>
                <a-select placeholder="请选择">
                    <a-select-option value="shanghai">Zone one</a-select-option>
                    <a-select-option value="beijing">Zone two</a-select-option>
                </a-select>
            </div>
            <div class="row-normal m-l-10">
                <span class="font-size-10" style="color: rgb(172,174,183);">物料编码：</span>
                <a-input placeholder="请输入"></a-input>
            </div>
            <div class="row-normal m-l-10">
                <span class="font-size-10" style="color: rgb(172,174,183);">物料名称：</span>
                <a-input placeholder="请输入"></a-input>
            </div>
            <div class="row-normal m-l-10 option-btn option-btn_search cursor-pointer">
                <span>搜索</span>
            </div>
            <div class="row-normal m-l-10 m-r-10 option-btn option-btn_reset cursor-pointer">
                <span>重置</span>
            </div>
        </div>
    </a-form>
</template>

<style>
.wsl-form .ant-select .ant-select-selector {
    background-color: transparent !important;
    width:8rem;
    height: 1.4rem;
    border-radius: .1rem;
    border: solid .08rem rgb(49,79,122)
}
.wsl-form .ant-select .ant-select-selection-placeholder {
    color: rgb(172,174,183);
    height: 1.4rem !important;
    font-size: .6rem !important;
    position: relative;
    top:-4px
}

.wsl-form .ant-select-selection-search input {
    height: 1.4rem !important;
}

.wsl-form .ant-select-selection-item {
    color: rgb(172,174,183);
    height: 1.4rem !important;
    font-size: .6rem !important;
    position: relative;
    top:-4px
}

.ant-select-dropdown {
    background-color: rgba(14,28,40,0.9) !important;
}

.ant-select-dropdown div{
    color: rgb(172,174,183) !important;
    font-size: .6rem !important;
}

.wsl-form .ant-input {
    background-color: transparent !important;
    width:8rem;
    height: 1.4rem;
    border-radius: .1rem;
    border: solid .08rem rgb(49,79,122);
    color: rgb(172,174,183);
    font-size: .6rem !important;
}

.wsl-form .ant-input::placeholder {
    color: rgb(172,174,183)
}
    
</style>

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');

.option-btn 
    color white
    padding 3.6px 14px
    font-size 10px
    border-radius 3px

.option-btn_search
    background-color rgb(143,191,115)

.option-btn_reset
    background-color rgb(87,148,216)

</style>